<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/mui.min.css">

		<style>
			.mui-content {
				margin-top: 10px;
			}
			
			body,
			body .mui-content {
				background-color: #fff !important;
			}
			
			code {
				word-wrap: break-word;
				word-break: normal;
				font-size: 90%;
				color: #c7254e;
				background-color: #f9f2f4;
				border-radius: 4px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">股票信息</h1>
		</header>
		<div class="mui-content">

			<div class="mui-input-group">
				<div class="mui-input-row">
					<label>股票类型：</label>
					<select id="stark-type">
						<option value="sh">上海股票</option>
						<option value="sz">深圳股票</option>
					</select>
				</div>
				<div class="mui-input-row">
					<label>股票号码：</label>
					<input type="text" id="stark-no" value='601008' />
				</div>
				<div class="mui-button-row">
					<button type="button" id="confirm" class="mui-btn mui-btn-primary">confirm</button>
					<button type="button" id="toggle" class="mui-btn mui-btn-primary">toggle</button>
				</div>
			</div>
			<h4 class="mui-content-padded">股票信息：</h4>
			<div id="slider" class="mui-slider mui-hidden">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../images/yuantiao.jpg">
							<p class="mui-slider-title">月线</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/shuijiao.jpg">
							<p class="mui-slider-title">分线</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/muwu.jpg">
							<p class="mui-slider-title">日线</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/cbd.jpg">
							<p class="mui-slider-title">周线</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/yuantiao.jpg">
							<p class="mui-slider-title">月线</p>
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../images/shuijiao.jpg">
							<p class="mui-slider-title">分线</p>
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator mui-text-right">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			<ul class="mui-table-view">
			</ul>
			<code id="response" style="background: red;"></code>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			
			(function($) {
				$.init({
					swipeBack: true //启用右滑关闭功能
				});

				var network = true;
				if(mui.os.plus) {
					mui.plusReady(function() {
						if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
							network = false;
						}
					});
				}

				var starktype = document.getElementById("stark-type");
				var starkno = document.getElementById("stark-no");
				var responseEl = document.getElementById("response");
				var slider = document.getElementById("slider");
				var pics = document.body.querySelectorAll("#slider img");
				var sliderTitles = document.body.querySelectorAll("#slider p.mui-slider-title");
				var tableview = document.querySelector('.mui-table-view');
				for(i = 0; i < 3; i++) {

				}

				starktype.addEventListener('change', function() {
					
					switch(starktype.value) {
						case 'sh':
							starkno.value = 601008;
							responseEl.innerHTML = "<p>上海证券交易所的股票以6开头共6位，如连云港股票代码601008</p>";
							break;
						case 'sz':
							starkno.value = '002526';
							responseEl.innerHTML = "<p>深圳证券交易所的股票已00开头共6位，如山东矿机股票代码002526</p>";
							responseEl.innerHTML += "<p>或者</p>";
							responseEl.innerHTML += "<p>深圳证券交易所创业板的股票已30开头共6位，如三丰智能股票代码300276</p>";
							break;
						default:
							break;
					}

				})
				//成功响应的回调函数
				var success = function(response) {
					if(response.resultcode == '200') {
						tableview.innerHTML = '';
						responseEl.innerHTML = response.resultcode + ' ' + response.reason;
						for(i in response.result[0].data) {
							var li = document.createElement('li');
							li.classList.add('mui-table-view-cell');
							li.innerText = i + ":" + response.result[0].data[i];
							tableview.appendChild(li);
						}
						if(slider.classList.contains('mui-hidden')) {
							pics[0].src = response.result[0].gopicture.monthurl;
							pics[1].src = response.result[0].gopicture.minurl;
							pics[2].src = response.result[0].gopicture.dayurl;
							pics[3].src = response.result[0].gopicture.weekurl;
							pics[4].src = response.result[0].gopicture.monthurl;
							pics[5].src = response.result[0].gopicture.minurl;

							slider.classList.remove('mui-hidden');
						}
					} else {
						mui.alert("未获取到相关股票信息，请检查股票号码是否正确");
						if(!slider.classList.contains('mui-hidden')) {
							slider.classList.add('mui-hidden');
						}
					}

				};
				//设置全局beforeSend
				$.ajaxSettings.beforeSend = function(xhr, setting) {
					//beforeSend演示,也可在$.ajax({beforeSend:function(){}})中设置单个Ajax的beforeSend
					console.log('beforeSend:::' + JSON.stringify(setting));
				};
				//设置全局complete
				$.ajaxSettings.complete = function(xhr, status) {
					console.log('complete:::' + status);
				}
				var ajax = function() {
					//gid=sh601009
					var url = 'http://web.juhe.cn:8080/finance/stock/hs?key=665a527e307f8b8be402dfa068403513&gid=';
					url += starktype.value + starkno.value;
					responseEl.innerHTML = starktype.value + starkno.value;
					$.getJSON(url, null, success);

				};
				//发送请求按钮的点击事件
				document.getElementById("confirm").addEventListener('tap', function() {

					if(network) {
						ajax();
					} else {
						mui.toast("当前网络不给力，请稍后再试");
					}
				});

				document.getElementById("toggle").addEventListener('tap', function() {
					responseEl.style.background = 'green';
				});

			})(mui);
		</script>
	</body>

</html>